<template>
  <div class="echarts-outer-wrapper width-620">
    <Title
      title="首贷中心（分月）"
      time="4"
      timePosition="left"
      dw="单位：户次"
    ></Title>
    <div ref="echarts" style="height: 368px">
      <echartCompt class="echarts-chart" v-model="chartOption" />
    </div>
  </div>
</template>
<script>
const FullYear = new Date().getFullYear();
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      yearData: "2022",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  computed: {
    chartOption() {
      let barWidth = 12;
      let colorList = ["rgba(83, 249, 195, 1)", "rgba(244, 81, 85, 1)"];
      var xdata = [];
      var data1 = [];
      var data2 = [];
      if (this.EchartData) {
        this.EchartData.aytjList.map((item, index) => {
          xdata.push(item.ssyf + "月");
          data1.push({
            value: this.EchartData.tqaytjList[index].tghc,
            year: "tqjrjgList",
            month: item.ssyf,
          });
          data2.push({
            value: item.tghc,
            year: "jrjgList",
            month: item.ssyf,
          });
        });
      }

      let option = {
        color: ["rgba(255, 255, 0, 1)", "rgba(56, 89, 255, 1)"],
        tooltip: echartOption.tooltip({
          trigger: "item",
          formatter: (params) => {
            let arr = [
              `<div style="color:${echartOption.tooltipTextColor}">${params.seriesName} ${params.name}</div>`,
            ];
            let data = params.data;
            let filterdata = this.EchartData[data.year].filter((item) => {
              return item.ssyf == data.month;
            });
            for (let item of filterdata) {
              arr.push(
                `<div style="color:${echartOption.tooltipTextColor}">${item.yhmc}:${item.tghc}</div>`
              );
            }
            return arr.join("");
          },
        }),
        grid: {
          top: 80,
          left: 48,
          right: 48,
          bottom: 20,
          containLabel: true,
        },
        legend: echartOption.echartLegend([
          { name: this.yearData[1] + "年", icon: "roundRect" },
          { name: this.yearData[0] + "年", icon: "roundRect" },
        ]),
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          boundaryGap: true,
        },
        yAxis: {
          type: "value",
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
          splitArea: { show: false },
        },
        series: [
          {
            type: "bar",
            name: this.yearData[1] + "年",
            data: data2,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: barWidth,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(79, 172, 254, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(0, 242, 254, 1)",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            name: this.yearData[0] + "年",
            data: data1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: barWidth,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(247, 203, 107, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      return option;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.ajax({
        url: "/dpzsGzcxService/sdzxFyQuery",
        method: "post",
        data: {
          param: {
            tqnd: FullYear - 1,
            dqnd: FullYear,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.EchartData = res.data;
        this.yearData = [
          this.EchartData.tqaytjList[0].ssnd,
          this.EchartData.aytjList[0].ssnd,
        ];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 614px;
  height: 422px;
}
.echarts-chart {
  height: 100%;
  width: 100%;
}
</style>
